<!DOCTYPE html>
<html>
    <head>
        <title>提现记录</title>
        <script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../static/js/axios.min.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/md5.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/json2.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/crypto-js.js" type="application/javascript" charset="UTF-8"></script>
        <script src="../static/js/common.js" type="application/javascript" charset="UTF-8"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <!-- 引入 WeUI CDN 链接 -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
    </head>
    <body>
        <div id="app">
            <div class="weui-navbar" style="align-items: center;">
                <div style="padding-left: 1rem;" @click="back()">返回</div>
                <div class="weui-navbar__item" style="position: initial;">
                    提现记录
                </div>
                <div style="opacity: 0;">占位</div>
            </div>
            <div class="page_bd">
                <div class="weui-cells">
                    <div class="weui-cell" v-for="(item,index) in list" :key="index" style="display: flex;font-size: 1rem;justify-content: space-between;border-bottom: #eeeeee solid 0.0625rem;">
                        <div style="display: flex;flex-direction: column;">
                            <label>
                                提现金额：{{item.cash}} 元
                            </label>
                            <label v-if="item.status == 2">
                                失败原因：{{item.mark}}
                            </label>
                            <label>提交时间：{{getTime(item.createtime)}}</label>
                            <label v-if="item.status == 1">完成时间：{{getTime(item.endtime)}}</label>
                            <label>
                                提现状态：{{statuslabel[item.status]}}
                            </label>
                        </div>
                        <div v-if="item.status == 0">
                            <a href="javascript:" class="weui-btn weui-btn_primary" style="width: auto;" @click="cancel(index,item.id)">取消</a>
                        </div>
                    </div>
                </div>
            </div>
            <div ref="loadingToast" style="opacity: 0; display: none;">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-primary-loading_transparent weui-icon_toast">
                        <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">取消中</p>
                </div>
            </div>
            <div class="weui-loadmore weui-loadmore_line">
                <span class="weui-loadmore__tips" @click="loadmore()">{{loadingTexts[loadingi]}}</span>
            </div>
        </div>
        <script type="application/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    param: {
                        index: 1,
                        size: 20
                    },
                    statuslabel: ['提现中', '提现成功', '提现失败', '已取消'],
                    loadingTexts: ['点击加载更多', '没有更多了', '暂无数据'],
                    loadingi: 2
                },
                methods: {
                    getList: function() {
                        var self = this
                        var data = JSON.stringify(self.param)
                        console.log(data)
                        data = wb_des(JSON.parse(data), '1982474', true);
                        axios.post('http://127.0.0.1:8080/api/cash/applist', data['data'], {
                                headers: data['key']
                            })
                            .then(function(response) {
                                let res = response.data
                                if (res.result == 0) {
                                    if (self.param.index == 1) {
                                        self.list = res.list
                                    } else {
                                        self.list = self.list.concat(res.list)
                                    }
                                    if (res.list.length == self.param.size) {
                                        self.loadingi = 0
                                    } else {
                                        if (self.list.length == 0) {
                                            self.loadingi = 2
                                        } else {
                                            self.loadingi = 1
                                        }
                                    }
                                } else {
                                    self.param.index -= 1
                                    alert(res.msg)
                                }
                                console.log(res)
                            })
                            .catch(function(error) {
                                self.param.index -= 1
                                console.log(error);
                                alert('请求出错')
                            });
                    },
                    loadmore: function() {
                        if (this.loadingi == 0) {
                            this.param.index += 1
                            this.getList()
                        }
                    },
                    cancel: function(index, id) {
                        var self = this
                        self.$refs.loadingToast.style.display = ''
                        var json = {
                            id: id
                        }
                        let data = wb_des(json, '1982474', true);
                        axios.post('http://127.0.0.1:8080/api/cash/cancel', data['data'], {
                                headers: data['key']
                            })
                            .then(function(response) {
                                self.$refs.loadingToast.style.display = 'none'
                                let res = response.data
                                if (res.result == 0) {
                                    self.list[index].status = 3
                                } else {
                                    alert(res.msg)
                                }
                            })
                            .catch(function(error) {
                                self.$refs.loadingToast.style.display = 'none'

                                console.log(error);
                                alert('请求出错')
                            });
                    },
                    back: function() {
                        window.history.go(-1);
                    },
                    getTime: function(time) {
                        let date = new Date(time)
                        return date.getFullYear() + '-' + this.handystr((date.getMonth() + 1)) + '-' + this
                            .handystr(date.getDate()) + ' ' + this.handystr(date.getHours()) + ':' + this.handystr(
                                date.getMinutes())
                    },
                    handystr: function(num) {
                        var str = num + ''
                        if (str.length == 1) {
                            str = '0' + str
                        }
                        return str
                    }
                }
            })
            app.getList()
        </script>
    </body>
    <style>
        body {
            margin: 0rem;
            height: 100vh;
            background-color: #F7F7F7;
        }

        label {
            padding-top: 0.3125rem;
        }
    </style>
</html>
